<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue'
import type { PageInfo, Result } from '@/tools/request'
import { type FileItem, Message, Modal } from '@arco-design/web-vue'
import type { WorkTravel } from '@/api/work/workTravel.d'
import {
  workTravelAdd, workTravelBatchExport, workTravelBatchImportTemplateDownload,
  workTravelById, workTravelList,
  workTravelModify,
  workTravelRemove, workTravelRemoveBatch
} from '@/api/work/workTravel'
import { useGlobalStore } from '@/stores/global'


//使用缓存
const cache = useGlobalStore().cache
const cacheMap = useGlobalStore().cacheMap

//表单部分
const workTravelFormRef = ref()
const workTravelForm = reactive({
  //搜索表单
  query: {
    workAddrr: null,
    startEndTime: null

  } as WorkTravel,
  submitQuery: () => {
    workTravelList(workTravelForm.query, {
      pageNum: workTravel.pageInfo.pageNum,
      pageSize: workTravel.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<WorkTravel>>) => {
        workTravel.pageInfo = resp.data
      }
    )
  },
  //新增修改表单
  form: {
    id: null,
    workAddrr: null,
    reason: null,
    startEndTime: null,
    createTime: null,
    updateTime: null,
    createBy: null,
    delBy: null,
    del: null

  } as WorkTravel,
  submitForm: ({ values, errors }: any) => {
    if (errors) return
    //修改
    if (workTravelForm.form.id) {
      workTravelModify(workTravelForm.form).then(() => {
        Message.success('修改工作出差成功')
        workTravelForm.visible = false
        workTravelForm.submitQuery()
      })
      return
    }
    //新增
    workTravelAdd(workTravelForm.form).then(() => {
      Message.success('新建工作出差成功')
      workTravelForm.visible = false
      workTravelForm.submitQuery()
    })
  },
  //弹出层title
  formTitle: '新增工作出差',
  //是否显示新增修改表单
  visible: false
})

const workTravel = reactive({
  pageInfo: {} as PageInfo<WorkTravel>,
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  },
  getList: (current: number) => {
    workTravelList(workTravelForm.query, {
      pageNum: current,
      pageSize: workTravel.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<WorkTravel>>) => {
      workTravel.pageInfo = resp.data
    })
  },
  selectKeys: [] as string[],
  batchDelete: () => {
    Modal.confirm({
      title: '警告',
      content: `确认删除工作出差【${workTravel.selectKeys}】吗？`,
      onOk(e) {
        workTravelRemoveBatch(workTravel.selectKeys!).then(() => {
          Message.success(`批量删除工作出差成功`)
          workTravelForm.submitQuery()
        })
      }
    })
  },
  add: () => {
    //新增工作出差
    workTravelFormRef.value!.resetFields()
    workTravelForm.formTitle = '新增工作出差'
    workTravelForm.visible = true
    workTravelForm.form.id = null
  },
  edit: (workTravel: WorkTravel) => {
    //编辑工作出差
    workTravelFormRef.value!.resetFields()
    workTravelForm.formTitle = '修改工作出差'
    workTravelForm.visible = true
    //@ts-ignore
    workTravelById(workTravel.id!).then((resp: Result<WorkTravel>) => {
      workTravelForm.form = resp.data
    })
  },
  delete: (workTravel: WorkTravel) => {
    //删除工作出差
    Modal.confirm({
      title: '警告！',
      content: `确认删除工作出差【${workTravel.id}】吗？`,
      onOk(e) {
        workTravelRemove(workTravel.id!).then(() => {
          Message.success(`删除工作出差【${workTravel.id}】成功`)
          workTravelForm.submitQuery()
        })
      }
    })
  },
  exportWorkTravel: () => {
    //导出数据
    Modal.confirm({
      title: '警告',
      content: `确认导出工作出差【${workTravel.selectKeys}】吗？`,
      onOk(e) {
        workTravelBatchExport(workTravel.selectKeys)
      }
    })
  },
  importVisible: false,
  importUploadWorkTravel: (fileList: FileItem[], files: FileItem) => {
    //导入数据上传
    console.log(files.file)
  },
  templateDownload: () => {
    //下载模板
    workTravelBatchImportTemplateDownload()
  }
})

onMounted(() => {
  workTravelForm.submitQuery()
})


</script>

<template>
  <a-breadcrumb class="my-3">
    <a-breadcrumb-item>工作管理</a-breadcrumb-item>
    <a-breadcrumb-item>工作出差管理</a-breadcrumb-item>
  </a-breadcrumb>
  <a-layout-content>
    <a-card>
      <template #title>
        工作出差管理
      </template>

      <a-form ref="searchFormRef" :model="workTravelForm.query" label-align="left"
              @submit="workTravelForm.submitQuery"
              v-permission="'permission:workTravel:list'"
      >
        <a-row :gutter="15" style="height: 32px">
          <a-col :span="6">
            <a-form-item field="workAddrr" label="出差地点">

              <a-input v-model="workTravelForm.query.workAddrr"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="startEndTime" label="起止时间">

              <a-range-picker :model-value="workTravelForm.query.startEndTime?.split(',')"
                              @change="value => workTravelForm.query.startEndTime = value ? value.join(',') : null" />

            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-space>
              <a-button type="primary" html-type="submit">
                <template #icon>
                  <IconSearch />
                </template>
                搜索
              </a-button>
              <a-button @click="$refs.searchFormRef.resetFields()" type="secondary">
                <template #icon>
                  <IconRefresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-divider :margin="16"></a-divider>
      <a-space class="mb-3">
        <a-button type="primary" @click="workTravel.add" v-permission="'permission:workTravel:create'">
          <template #icon>
            <IconPlus />
          </template>
          新建
        </a-button>
        <a-button class="removeBtn" @click="workTravel.importVisible = true"
                  :disabled="!workTravel.selectKeys.length"
                  v-permission="'permission:workTravel:import'">
          <template #icon>
            <IconUpload />
          </template>
          导入
        </a-button>
        <a-button class="removeBtn" @click="workTravel.exportWorkTravel"
                  :disabled="!workTravel.selectKeys.length"
                  v-permission="'permission:workTravel:export'">
          <template #icon>
            <IconDownload />
          </template>
          导出
        </a-button>
        <a-button class="removeBtn" @click="workTravel.batchDelete"
                  :disabled="!workTravel.selectKeys.length"
                  v-permission="'permission:workTravel:batchDelete'">
          <template #icon>
            <IconDelete />
          </template>
          批量删除
        </a-button>
        <a-button class="removeBtn" @click="workTravel.getList" v-permission="'permission:workTravel:list'">
          <template #icon>
            <IconRefresh />
          </template>
        </a-button>
      </a-space>
      <a-table row-key="id" :data="workTravel.pageInfo.list"
               :row-selection="workTravel.rowSelection"
               v-model:selected-keys="workTravel.selectKeys" :pagination="false"
               @row-click="(record:any)=>$router.push({path: '/work/travelPay',query: {id:record.id}})"
      >
        <template #columns>

          <a-table-column data-index="id" title="ID" />
          <a-table-column data-index="workAddrr" title="出差地点" />
          <a-table-column data-index="startEndTime" title="起止时间" />
          <a-table-column data-index="createTime" title="创建时间" />
          <a-table-column title="操作" width="200">
            <template #cell="{record}">
              <a-space>
                <a-button @click.stop="workTravel.edit(record)" type="text"
                          v-permission="'permission:workTravel:update'">
                  <template #icon>
                    <IconEdit />
                  </template>
                  编辑
                </a-button>
                <a-button @click.stop="workTravel.delete(record)" type="text"
                          v-permission="'permission:workTravel:delete'"
                          class="text-danger">
                  <template #icon>
                    <IconDelete />
                  </template>
                  删除
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

      <div class="d-flex justify-content-end mt-2">
        <a-pagination :total="workTravel.pageInfo.total" :page-size="workTravel.pageInfo.pageSize"
                      :current="workTravel.pageInfo.pageNum"
                      @change="workTravel.getList" class="mt-3"></a-pagination>
      </div>

      <a-modal :title="workTravelForm.formTitle" title-align="start"
               v-model:visible="workTravelForm.visible"
               :footer="null">
        <a-form ref="workTravelFormRef" :model="workTravelForm.form"
                @submit="workTravelForm.submitForm">
          <a-form-item field="workAddrr" hide-asterisk label="出差地点"
                       :rules="[{ required: true,message: '出差地点不能为空！' }]"
                       validate-trigger="blur"
          >
            <a-input v-model="workTravelForm.form.workAddrr"></a-input>
          </a-form-item>
          <a-form-item field="reason" hide-asterisk label="出差事由"
                       :rules="[{ required: true,message: '出差事由不能为空！' }]"
                       validate-trigger="blur"
          >
            <a-textarea v-model="workTravelForm.form.reason" />

          </a-form-item>
          <a-form-item field="startEndTime" hide-asterisk label="起止时间"
                       :rules="[{ required: true,message: '起止时间不能为空！' }]"
                       validate-trigger="blur"
          >

            <a-range-picker :model-value="workTravelForm.form.startEndTime?.split(',')"
                            @change="value => workTravelForm.form.startEndTime = value ? value.join(',') : null" />

          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>
      </a-modal>
      <a-modal title="导入工作出差" v-model:visible="workTravel.importVisible" :footer="false">
        <a-upload @change="workTravel.importUploadWorkTravel" draggable
                  accept="application/vnd.ms-excel,.xlsx"></a-upload>
        <div class="text-end mt-2">
          <a-link @click="workTravel.templateDownload">下载导入模板</a-link>
        </div>
      </a-modal>
    </a-card>
  </a-layout-content>
</template>

<style scoped lang="scss">
</style>
